<template>
	<view class="info-sheet">
		<view class="sheet-header">
			<view class="title-container">
				<view class="sheet-dept">{{ sheetData.sheetTitle }}</view>
				<view class="title-bg"></view>
			</view>
			<view class="sheet-status" :class="{ 'nobook': sheetData.status === 0, 'booked' : sheetData.status === 2}"
				v-if="sheetData.statusValue">
				{{ sheetData.statusValue }}
			</view>
		</view>

		<!-- 动态渲染 sheet-row -->
		<view class="sheet-row" v-for="(item, idx) in sheetData.fields" :key="idx" v-if="item.value">
			<view class="label" :class="{ 'vital': item.vital, 'newchild' : item.isNewChild }">
				{{ item.label }} ：
			</view>
			<view class="value" :class="{ 'vital': item.vital }">
				{{ item.value }}
			</view>
			<!-- 特殊字段（如导航按钮） -->
			<button v-if="item.hasGuideBtn == true" class="nav-btn">院内导航</button>
		</view>

		<view class="sheet-divider" v-if="sheetData.money || sheetData.lineBtn || sheetData.coverBtn"></view>
		<view class="sheet-btn-row" v-if="sheetData.money || sheetData.lineBtn || sheetData.coverBtn">
			<view class="money-text vital" v-if="sheetData.money">{{ sheetData.money }}</view>
			<button class="line-btn" v-if="sheetData.lineBtn"
				@click="toPage(sheetData.lineBtn)">{{ sheetData.lineBtn }}</button>
			<button class="cover-btn" v-if="sheetData.coverBtn"
				@click="toPage(sheetData.coverBtn)">{{ sheetData.coverBtn }}</button>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			sheetData: {
				type: Object,
				required: true,
				default: () => ({
					sheetTitle: '',
					status: '',
					fields: {}, // 动态字段
				}),
			},
		},
		methods: {
			toPage(btn) {
				console.log(btn)
				let url = ''
				if (btn == '住院登记') {
					url = '/pages/Home/ServeHospital/InHospitalRegisterRecord?item=' + JSON.stringify(this.sheetData)
				} else if (btn == '住院评估') {
					url = '/pages/Home/ServeHospital/InHospitalAssess?item=' + JSON.stringify(this.sheetData)
				} else if (btn == '出院结算') {
					url = '/pages/Home/ServeHospital/InHospitalAssess?item=' + JSON.stringify(this.sheetData)
				} else {
					url = '/pages/Home/ServeHospital/InHospitalToPay?item=' + JSON.stringify(this.sheetData)
				}
				uni.navigateTo({
					url: url
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.info-sheet {
		background: #fff;
		border-radius: 16rpx;
		margin: 25rpx 0 0 0;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
		padding: 24rpx 32rpx 18rpx 32rpx;
	}

	.sheet-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 18rpx;
	}

	.title-container {
		position: relative;
	}

	.sheet-dept {
		font-size: 32rpx;
		color: #333;
		font-weight: bold;
	}

	.title-bg {
		position: absolute;
		width: 48rpx;
		height: 15rpx;
		background-color: rgba(65, 207, 230, 0.5);
		bottom: 0;
		left: calc(20%);
		z-index: 0;
	}

	.sheet-status {
		background: #4ad49a;
		color: #fff;
		font-size: 24rpx;
		border-radius: 8rpx;
		padding: 4rpx 18rpx;
		right: 8rpx;
	}

	.sheet-status.nobook {
		background: #eba242;
	}

	.sheet-status.booked {
		background: #bd4d4d;
	}

	.sheet-divider {
		height: 1rpx;
		border-top: 1rpx dashed #e0e0e0;
		margin: 18rpx 0 18rpx 0;
		width: 100%;
	}

	.sheet-row {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.label {
		color: #888;
		font-size: 28rpx;
		width: 160rpx;
	}

	.label.newchild {
		width: 170rpx;
	}

	.value {
		color: #333;
		font-size: 28rpx;
		flex: 1;
	}

	.vital {
		color: #ca3333;
	}

	.nav-btn {
		background: #e0f3ff;
		color: #1ec6e6;
		font-size: 22rpx;
		border-radius: 24rpx;
		padding: 0 18rpx;
		height: 40rpx;
		line-height: 40rpx;
		border: none;
		margin-left: 12rpx;
	}

	.sheet-btn-row {
		display: flex;
		justify-content: space-between;
		margin: 30rpx 0 15rpx;
	}

	.money-text {
		font-size: 32rpx;
		margin: 8rpx 100rpx 0 0;
	}

	.line-btn {
		width: 48%;
		height: 64rpx;
		background: #fff;
		color: #1ec6e6;
		font-size: 28rpx;
		border-radius: 44rpx;
		border: 1rpx solid #1ec6e6;
		text-align: center;
		line-height: 64rpx;
	}

	.cover-btn {
		width: 48%;
		height: 64rpx;
		background: linear-gradient(90deg, #6ed6f7 0%, #3ec6e7 100%);
		color: #fff;
		font-size: 28rpx;
		border-radius: 44rpx;
		text-align: center;
		line-height: 64rpx;
		border: none;
	}
</style>